// LogoComponent.js

class LogoComponent {
    constructor(container) {
        this.container = container;
        this.init();
    }

    // 定义机器人状态及对应的表情和提示语
    static ROBOT_STATES = {
        normal: {
            expression: 'M35 60 Q50 70 65 60',  // 标准笑脸
            message: 'Hello! 需要帮助吗？ 😊',
            color: '#fbbf24'  // 黄色
        },
        working: {
            expression: 'M35 65 L65 65',  // 专注的表情
            message: '我正在认真工作中... 💪',
            color: '#22c55e'  // 绿色
        },
        charging: {
            expression: 'M35 60 Q50 65 65 60',  // 轻松的表情
            message: '充电中，很快就好~ ⚡',
            color: '#3b82f6'  // 蓝色
        },
        error: {
            expression: 'M35 70 Q50 60 65 70',  // 难过的表情
            message: '遇到了一些问题，需要帮助... 😢',
            color: '#ef4444'  // 红色
        },
        sleeping: {
            expression: 'M35 65 Q50 65 65 65',  // 平静的表情
            message: 'Zzz... 休息时间 💤',
            color: '#8b5cf6'  // 紫色
        },
        cleaning: {
            expression: 'M35 55 Q50 65 65 55',  // 开心的表情
            message: '让我把这里打扫得干干净净! 🧹',
            color: '#22c55e'  // 绿色
        }
    };

    init() {
        this.render();
        this.bindEvents();
    }

    // 更新机器人状态
    updateState(newState) {
        if (LogoComponent.ROBOT_STATES[newState]) {
            this.currentState = newState;
            const logoSection = this.container.querySelector('.logo-section');
            if (logoSection) {
                // 移除所有状态类
                logoSection.classList.remove('error', 'working', 'charging', 'sleeping');
                // 添加新的状态类
                logoSection.classList.add(newState);
            }
            this.updateExpression();
        }
    }

    // 更新表情和提示语
    updateExpression() {
        const state = LogoComponent.ROBOT_STATES[this.currentState];
        const smile = this.container.querySelector('.smile');
        const message = this.container.querySelector('.greeting-bubble');

        if (smile && message) {
            smile.setAttribute('d', state.expression);
            smile.style.stroke = state.color;
            message.textContent = state.message;

            // 更新外圈颜色
            const outerRing = this.container.querySelector('.outer-ring');
            if (outerRing) {
                outerRing.style.stroke = state.color;
            }
        }
    }

    bindEvents() {
        const logoContainer = this.container.querySelector('.logo-container');
        if (logoContainer) {
            // 添加鼠标进入事件监听
            logoContainer.addEventListener('mouseenter', () => {
                logoContainer.classList.add('hover');
            });

            // 添加鼠标离开事件监听
            logoContainer.addEventListener('mouseleave', () => {
                logoContainer.classList.remove('hover');
            });
        }
    }

    renderUI() {
        return `
            <div class="logo-section">
                <div class="logo-container">
                    <div class="greeting-bubble">Hello! 欢迎使用！ 😊</div>
                    <svg class="brand-logo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <!-- 简化的扫地机器人 LOGO -->
                        <circle class="outer-ring" cx="50" cy="50" r="48"
                                stroke="url(#gradient1)" stroke-width="2" fill="none"/>

                        <!-- 渐变定义 -->
                        <defs>
                            <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:1" />
                            </linearGradient>
                        </defs>

                        <!-- 机器人主体 -->
                        <circle class="robot-body" cx="50" cy="50" r="35"
                                fill="#3b82f6"/>

                        <!-- 眼睛 -->
                        <circle class="eye left" cx="35" cy="45" r="5" fill="#fff"/>
                        <circle class="eye right" cx="65" cy="45" r="5" fill="#fff"/>

                        <!-- 笑脸 -->
                        <path class="smile" d="M35 60 Q50 70 65 60"
                              stroke="#fff" stroke-width="3" fill="none"/>
                    </svg>
                </div>
                <div class="brand-info">
                    <div class="brand-name">Venus SmartSweep</div>
                    <div class="version-info">
                        <span>Version 2.0.0</span>
                        <span>•</span>
                        <span>Build A1.0</span>
                    </div>
                </div>
            </div>
        `;
    }

    render() {
        this.container.innerHTML = this.renderUI();
    }
}